<template>
	<view class="out">
		<uni-nav-bar fixed="true" backgroundColor="#f5f5f5" :title="post.title" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body">
			<view class="header">
				<image @click="watchUser(user.uid)" :src="user.avatar" mode="aspectFill" class="avatar"></image>
				<view class="username" @click="watchUser(user.uid)">
					{{user.username}}
				</view>
				<view v-if="this.$store.state.user.uid !== user.uid">
					<view v-if="!isSubscribe" class="subcribe" @click="subscribe(user.uid)">
						关注
					</view>
					<view v-else class="subcribe" @click="unSubscribe(user.uid)">
						取消关注
					</view>
				</view>
			</view>
			<view class="title">
				{{post.title}}
			</view>

			<u-parse selectable :content="post.html" @imgtap="tapImg" :preview-img="false"></u-parse>

			<view class="sendDate">
				帖子发表:
				<uni-dateformat :date="post.date>new Date().getTime()?new Date().getTime():post.date"
					:threshold="[60000,36000000]" format="MM-dd hh:mm" />
			</view>
		</view>
		<view class="div_h">
		</view>
		<view class="comment">
			<view class="comment-bar">
				<view class="comment-title">
					全部评论
				</view>
				<view class="refresh" @click="refresh">
					<uni-icons type="refreshempty" size="25"></uni-icons>刷新
				</view>
			</view>
			<view class="comment-list" v-for="(comment,index) in comments" :key="index"
				@click="clickReply(comment,index+1)">
				<comment :comment="comment" :floor="index+1" :reply="comment.ccomments" :uid="comment.uid"
					:getUser="getUser" @clickReply="clickReply(comment,index+1)" @clickUser="watchUser(comment.uid)">
				</comment>
			</view>
		</view>
		<view class="more">
			<text v-if="!more">到底了~~~</text>
		</view>
		<view class="footer">
			<view class="click" @click="isComment = true">
				我有话要说...
			</view>
			<view class="btn">
				<u-icon class='icon' name="chat" size="60" @click="slideToComment" :label="post.comments">
				</u-icon>
				<u-icon class='icon' v-if="!isLiked" name="thumb-up" size="60" @click="like" :label="post.likes">
				</u-icon>
				<u-icon class='icon' v-if="isLiked" name="thumb-up-fill" size="60" color="#82B7D7" @click="unLike"
					:label="post.likes">
				</u-icon>
				<u-icon class='icon' v-if="!isCollected" name="star" size="60" @click="collect"
					:label="post.collections">
				</u-icon>
				<u-icon class='icon' v-if="isCollected" name="star-fill" size="60" color="#f9ffae" @click="uncollect"
					:label="post.collections">
				</u-icon>
			</view>
		</view>
		<hqs-popup title="回复 @帖子" :value="isComment" @close="isComment = false">
			<view class="popup">
				<u-textarea class="input" height="120" v-model="cmt" @blur="storeCursor" :cursor="resStart" count
					placeholder="我有话要说..."></u-textarea>
				<view class="bar">
					<uni-icons class="icon" customPrefix="iconfont" type="icon-smile" color="#80858B" size="40">
					</uni-icons>
					<view :class="{'btn':true,'disable':cmt.length==0,'able':cmt.length>0}" @click="comment">
						发送
					</view>
				</view>
				<view class="emotion">
					<swiper :indicator-dots="true" class="swiper">
						<swiper-item v-for="(parentItem, parentIndex) in emoList" :key="parentIndex">
							<view class="swiper-item">
								<image v-for="item in parentItem" :src="item.value | imgSrc" :key="item.value"
									class="image" @click="clickEmoji(item)" mode="aspectFit"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</hqs-popup>
	</view>
</template>

<script>
	import util from "@/config/util.js"
	import pop from "@/components/hqs-popup/hqs-popup.vue"
	import comment from "@/components/comment.vue"
	export default {
		components: {
			pop,
			comment
		},
		data() {
			return {
				post: {},
				user: {},
				index: null,
				comments: [],
				isComment: false,
				isSubscribe: false,
				isLiked: false,
				isCollected: false,
				cmt: "",
				//表情列表
				emoList: util.emoList,
				resStart: 0, //input光标位置
				more: true,
			}
		},
		filters: {
			imgSrc(value) {
				return `../../static/emoji/d_${value}.gif`
			}
		},
		methods: {
			tapImg(e) {
				console.log(e)
				// console.log(e['data-custom'])
				if ('data-custom' in e) {
					let data = this.parse(e['data-custom'])
					// console.log(data)
					if (data.type == 'image') {
						uni.previewImage({
							urls: [e['src']]
						})
					} else {
						uni.navigateTo({
							url: "../video/video?src=" + data.src
						})
					}
				} else {
					uni.previewImage({
						urls: [e['src']]
					})
				}
			},
			parse(str) {
				let res = {}
				let strs = str.split('&amp;')
				// console.log(strs)
				for (var i = 0; i < strs.length; i++) {
					let s = strs[i].split('=')
					// console.log(s)
					res[s[0]] = s[1]
				}
				return res;
			},
			refresh() {
				this.comments = []
				this.more = true
				this.getComment(this.post.pid, 0)
			},
			clickReply(comment, floor) {
				uni.navigateTo({
					url: "../comment_comment/comment_comment?comment=" + JSON.stringify(comment) + "&floor=" +
						floor
				})
			},
			watchUser(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			isSubscribeFun(uid) {
				this.$request.TokenRequest({
					url: "/user/isSubscribe"
				}, {
					BUid: uid
				}).then(res => {
					console.log(res)
					if (res.state === 200) {
						this.isSubscribe = res.data.isSubscribe == 1 ? true : false
					}
				})
			},
			subscribe(uid) {
				console.log("关注" + uid);
				this.$request.TokenRequest({
					url: "/user/SubscribeUser"
				}, {
					BUid: uid
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "关注成功!"
						})
						this.isSubscribe = true
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			unSubscribe(uid) {
				console.log("取消关注" + uid);
				this.$request.TokenRequest({
					url: "/user/UnSubscribeUser"
				}, {
					BUid: uid
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "取消关注成功!"
						})
						this.isSubscribe = false
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			storeCursor(e) {
				this.resStart = e.target.cursor
				// console.log(this.resStart)
			},
			comment() {
				console.log("comment")
				if (this.cmt.length == 0) return;
				let pComment = {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
					comment: this.cmt,
				}
				this.$request.TokenRequest({
					url: "/post/commentPost"
				}, pComment).then(res => {
					if (res.state === 200) {
						// this.comments.push(res.data)
						this.isComment = false
						this.cmt = ""
						this.getComment(this.post.pid, this.getLatestCid())
						uni.showToast({
							icon: "success",
							title: "评论成功!"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			slideToComment() {
				uni.createSelectorQuery().select('.comment').boundingClientRect(data => { //目标位置的节点：类class或者id
					uni.createSelectorQuery().select(".out").boundingClientRect(res => { //最外层盒子的节点：类class或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: data.top - res.top - 200, //到达距离顶部的top值
							//scrollTop:data.top - res.top,//如果置顶
						})
					}).exec()
				}).exec();
			},
			isLike() {
				this.$request.TokenRequest({
					url: "/post/isLiked"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					console.log(res)
					if (res.state === 200) {
						this.isLiked = res.data.isLike == 1 ? true : false
					}
				})
			},
			unLike() {
				console.log("取消点赞" + this.post.pid);
				this.$request.TokenRequest({
					url: "/post/UnLikePost"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.isLiked = false;
						this.post.likes -= 1;
						uni.$emit("likeEvent", {
							index: this.index,
							like: false,
							num: this.post.likes
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			like() {
				//TODO
				console.log("like")
				this.$request.TokenRequest({
					url: "/post/likePost"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("点赞成功")
						this.isLiked = true;
						this.post.likes += 1;
						uni.$emit("likeEvent", {
							index: this.index,
							like: true,
							num: this.post.likes
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			isCollect() {
				this.$request.TokenRequest({
					url: "/user/isCollect"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					console.log(res)
					if (res.state === 200) {
						this.isCollected = res.data.isCollect == 1 ? true : false
					}
				})
			},
			collect() {
				//TODO
				console.log("collect")
				this.$request.TokenRequest({
					url: "/user/CollectPost"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("收藏成功")
						this.isCollected = true;
						this.post.collections += 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			uncollect() {
				console.log("取消收藏" + this.post.pid);
				this.$request.TokenRequest({
					url: "/user/UnCollectPost"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.isCollected = false;
						this.post.collections -= 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			//点击表情
			clickEmoji(item) {
				// console.log(item.lable)
				this.cmt = this.cmt.substring(0, this.resStart) +
					item.lable + this.cmt.substring(this.resStart, this.cmt.length)
				this.resStart += item.lable.length
			},
			getPost(pid) {
				this.$request.TokenRequest({
					url: "/post/postInfo"
				}, {
					pid: pid
				}).then(res => {
					if (res.state === 200) {
						this.post = res.data.post
						this.getUser(this.post.uid).then(res => {
							this.user = res
							this.isSubscribeFun(this.user.uid);
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						uni.navigateBack({})
					}
				})
			},
			getUser(uid) {
				return new Promise((resolve, reject) => {
					this.$request.TokenRequest({
						url: "/user/getUserInfoByUid"
					}, {
						uid: uid
					}).then(res => {
						if (res.state === 200) {
							resolve(res.data)
						}
						reject(res)
					})
				})
			},
			getComment(pid, startCid) {
				//TODO:获取评论
				console.log("获取评论:pid=" + pid + " cid=" + startCid)
				this.$request.TokenRequest({
					url: "/post/getCommentByPid"
				}, {
					pid: pid,
					startCid: startCid
				}).then(res => {
					if (res.state === 200) {
						if (res.data.length > 0)
							this.comments = this.comments.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			getLatestCid() {
				let l = this.comments.length
				if (l == 0) return 0;
				else return this.comments[l - 1].cid;
			},
			back() {
				uni.navigateBack({})
			},
			getDate(stamp) {
				let date = new Date(stamp)
				let month = date.getMonth() + 1
				let day = date.getDay()
				let hour = date.getHours()
				let minute = date.getMinutes()
				return util.add0(month) + "-" + util.add0(day) + " " +
					util.add0(hour) + ":" + util.add0(minute)
			},
		},
		onLoad(option) {
			let pid = option.pid
			this.index = option.index
			console.log(pid)
			this.getPost(pid)
			this.getComment(pid, 0)
			setTimeout(() => {
				this.isLike();
			}, 300)
			setTimeout(() => {
				this.isCollect();
			}, 400)
		},
		onReachBottom() {
			console.log("reach bottom")
			this.getComment(this.post.pid, this.getLatestCid())
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-navbar__header-container-inner {
		font-weight: bold;
	}

	.body {
		width: 90%;
		margin: 0 auto;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 65rpx 0;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.username {
			font-size: 30rpx;
			padding: 0 30rpx;
		}

		.subcribe {
			text-align: center;
			border: 1rpx solid #42A5F5;
			border-radius: 10rpx;
			color: #42A5F5;
			position: absolute;
			right: 50rpx;
			font-size: 26rpx;
			font-weight: bold;
			padding: 7rpx 30rpx;
		}


	}

	.title {
		font-size: 60rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		// width: 90%;
		// margin: 0 auto;
		// text-align: center;
	}

	.sendDate {
		text-align: center;
		color: #818489;
		padding: 30rpx 0;
	}

	.div_h {
		height: 20rpx;
		background-color: #F6F6F6;
		margin-top: 40rpx;
	}


	.popup {
		.input {
			margin: 10rpx 30rpx;
		}

		/deep/.u-textarea__field {
			font-size: 30rpx;
		}

		.bar {
			display: flex;
			align-items: center;

			.btn {
				position: absolute;
				right: 30rpx;
				padding: 7rpx 20rpx;
				font-size: 30rpx;
				text-align: center;
				border-radius: 10rpx;
			}

			.able {
				background-color: #19A3FE;
				color: #FFFFFF;
			}

			.disable {
				background-color: #F0F1F5;
				color: #A6A6A6;
			}

			.icon {
				margin: 0 30rpx;
			}
		}

		.emotion {
			padding-top: 20%;

			.swiper {
				height: 370rpx;
				text-align: center;
			}

			.image {
				height: 60rpx;
				width: 60rpx;
				padding: 15rpx;
				margin: 10rpx 0;
			}
		}
	}

	.comment {

		.comment-bar {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;
		}

		.comment-title {
			font-size: 34rpx;
			font-weight: bold;
			padding: 20rpx 30rpx;

		}

		.refresh {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			position: absolute;
			right: 30rpx;
		}
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0rpx;
		background-color: #F5F5F5;
		width: 100%;
		align-items: center;

		.click {
			width: 34%;
			padding: 15rpx 20rpx;
			margin: 20rpx 3%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			color: #818489;
			font-size: 30rpx;
		}

		.btn {
			width: 60%;
			display: flex;
			text-align: center;
			align-items: center;
			justify-items: center;

			.icon {
				width: 33%;
			}
		}


	}

	.more {
		text-align: center;
		padding: 20rpx;
		padding-bottom: 120rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}
</style>
